<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>16_排他思想-方法1-点击任意的li,点击的这一个li变成哈哈，其余的li变成呵呵</title>
    </head>
    <body>
        <ul>
            <li>李贵娱</li>
            <li>马志强</li>
            <li>小宇</li>
            <li>大鹏</li>
            <li>老卢</li>
            <li>我</li>
        </ul>

        <script>
            var li_list =document.querySelectorAll('li');

            // 遍历的是li的所有的下标
            for(var i = 0; i < li_list.length; i++){

                // 要给li对象上加一个属性 index  属性的值是i
                li_list[i].index = i;

                // 通过下标来找到li  然后进行点击
                li_list[i].onclick = function(){
                    // 将所有的li的内容 修改为哈哈
                    for(var j = 0; j < li_list.length; j++){
                        li_list[j].innerHTML = '哈哈';
                    }

                    // this.innerHTML = '呵呵';
                    // 我就要在onclick中使用i  0~5

                    // this代表的是当前点击的li
                    // 因为我们在之前将每一个li的身上都绑定了一个属性 叫做index
                    // index就是i
                    // 我们找到i 就可以使用li_list的下标来找到当前点击的对象
                    li_list[this.index].innerHTML = '呵呵';

                }
            }

            // 总结：什么时候会想到将li身上绑定属性？就是要在事件中使用到外层的
            // 循环的变量


        </script>
    </body>
</html>